
{{template "base.html" .}}

{{define "content"}}
<div class="content">
    <h2>咨询列表</h2>
    <hr>
    <div style="width: 100%;min-height: 300px">
    {{range $idx,$res := .data}}
    <div  class="layui-col-md4 RecordLi">
        <div class="layui-panel card"  id="{{$res.Uid2}}">
            <div class="notice" style="display: none;"></div>
            <div style="width: 50px;height: 50px;float: left;margin-top: 10px;">
                <img class="Avatar" src="{{$res.Avatar}}">
                <div id="layim-chat-img-state" class="layim-chat-state-offline"></div>
            </div>
            <div style="margin-top: 10px;    float: left;margin-left: 10px;">
                <div class="title" >{{$res.Name}}</div>
                <div class="person" >{{$res.NewMessage}}</div>
                <a href="www.baidu.com"></a>
            </div>
        </div>
    </div>
    {{end}}
    </div>
</div>
<script>
    $(".card").click(function (){
        $(location).attr("href","/teacher/client/msg/"+this.id)
    })
    $(document).ready(function (){
        //获取未读消息数
        $.ajax({
            url:"/public/msg/getUnread",
            data:{
                id:getCookie("Id")
            },
            method:"post",
            success:function (res){
                $.each(res.UnreadList, function (key, values) {
                    $("#"+key).find(".notice").html(values)
                    $("#"+key).find(".notice").css("display","")
                });
            }
        })
    })
</script>
<style>
    .content {
        padding: 5% 10%;
    }
    .RecordLi{
        height: 75px;
        padding: 0 5px;
        margin-bottom: 10px;
    }
    .RecordLi .card{
        height: 100%;
        padding: 0 10px;
        min-width: 220px;
    }
    .card {
        background-color: #FFF;
        border-radius: 6px;
        -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
        transition: all 250ms cubic-bezier(.02, .01, .47, 1);

    }
    .card:hover {
        cursor: pointer;
        box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
        transform: translate(0,-5px);
        transition-delay: 0s !important;
    }
    .testTime{
        float: right;
        color: #d2d2d2;
    }
    .title{
        font-weight: bold;
        font-size: 1.2em;

    }
    .person{
        margin-top: 5px;
        color: darkgray;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 100px;
    }
    .Avatar {
        width: 50px;
        height: 50px;
        border-radius: 100%;
    }
    .layim-chat-state-offline{
        position: absolute;
        width: 12px;
        height: 12px;
        right: 0px;
        bottom: 0px;
        background-color: #8d8d8d;
        border-bottom-right-radius: 6px;
    }
    .layim-chat-state-online{
        position: absolute;
        width: 12px;
        height: 12px;
        right: 0px;
        bottom: 0px;
        background-color: #1bfb00;
        border-bottom-right-radius: 6px;
    }
</style>
{{end}}
